﻿<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>左侧菜单栏</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body style="background:#f0f9fd;">
    <div class="lefttop"><span></span>菜单栏</div>
    <dl class="leftmenu" id="box">
        <template v-for="(item,index) in firstmenuList" :key="item.id">
            <dd>
                <div class="title" v-on:click="menu_active(index)">
                    <span><img src="images/leftico01.png" alt="img" /></span>
                    {{item.pername}}
                </div>
                <ul class="menuson" v-bind:ref="'ul'+index" style="display:none" v-bind:class="`ul${index}`">
                    <template v-if="secondmenumap[item.id]!=null">
                        <template v-for="(secondmenumapitem,secondmenumapindex) in secondmenumap[item.id]"
                            :key="secondmenumapitem.id">
                            <li>
                                <cite></cite>
                                <a v-bind:href="secondmenumapitem.url"
                                    target="rightFrame">{{secondmenumapitem.pername}}</a>
                            </li>
                        </template>
                    </template>
                </ul>
            </dd>
        </template>
    </dl>
</body>



<script>
    var obj = {
        data () {
            return {
                firstmenuList: [],
                secondmenumap: {}
            }
        },
        created () {
            axios({
                method: 'post',
                url: '/blog/all/initLeft',
            }).then(function (result) {
                vm.firstmenuList = result.data.data.firstmenuList;
                vm.secondmenumap = result.data.data.secondmenumap;
            });
        },
        methods: {
            menu_active (index) {
                if (document.querySelector(`.ul${index}`).style.display == 'block') {
                    document.querySelector(`.ul${index}`).style.display = 'none'
                } else {
                    for (var i = 0; i < document.querySelectorAll('.menuson').length; i++) {
                        document.querySelectorAll('.menuson')[i].style.display = 'none'
                    }
                    document.querySelector(`.ul${index}`).style.display = 'block'
                }
            }
        }
    }
    var vm = Vue.createApp(obj).mount("#box")
</script>

</html>